{% extends "base.html" %}{% load static %}
{% block title %}Share Machine{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'layui/css/style.css' %}">{% endblock %}
{% block legend_name %}Share Machine with Other Users{% endblock %}
{% block content %}
 
<div class="layui-container">
    <div class="layui-card layui-col-md3-offset2">
        <div class="layui-card-header">Adjust the Machine to be Shared on the Right Side</div>
        <div id="showdevice"></div>
        <button id="create" type="button" class="layui-btn padding-5" lay-on="getData">Generate Sharing Link</button>
    </div> 
    <div class="layui-card">1. The link is valid for 15 minutes, do not share it with others casually.</div>
    <div class="layui-card">2. The shared machine grants the same permissions to the recipient. If the machine has a saved password, the recipient can also connect directly.</div>
    <div class="layui-card">3. For security reasons, the link is valid for 15 minutes and only effective once. Once the link is accessed by a user other than the sharer's login user, the sharing takes effect, and subsequent access links become invalid.</div>
    
    <div class="layui-card layui-col-md6-offset1">
          <table class="layui-table">
            <colgroup>
              <col width="30">
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <thead>
              <tr>
                <th>Link Address</th>
                <th>Creation Time</th>
                <th>ID List</th>
              </tr> 
            </thead>
            <tbody>
            {% for one in sharelinks %}
              <tr>
                <td><script> document.write(window.location);</script>/{{one.shash}} </td>
                <td>{{one.create_time}}</td>
                <td>{{one.peers}}</td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
    </div> 
</div>

<script>
  layui.use(['transfer', 'jquery', 'layer'], function(){
    var transfer = layui.transfer;
    var $      = layui.jquery;
    var layer  = layui.layer;

    // Render Transfer
    transfer.render({
      elem: '#showdevice'  // Bind to the element
      ,title: ['My Machines', 'Shared Machines']  // Custom titles
      ,data: [// Data source
        {% for peer in peers %}
          {"value": "{{peer.id}}", "title": "{{peer.name}}"},
        {% endfor %}
      ]  
      ,id: 'device' 
    });

    $("#create").click(function(){
        var getData = transfer.getData('device');
        $.ajax({
            url:'/api/share',
            type:'post',
            dataType:'json',
            data:{
                data:JSON.stringify(getData),
            },
            success:function(data){
                if (data.code == 1) {
                    layer.alert('Success! To share, please copy the following link to others:<br>'+ window.location + '/' +data.shash, function (index) {
                        location.reload();
                    });                    
                }else {
                    layer.msg(data.msg);
                }
            }
        });
    });
  });
</script>
{% endblock %}
